<template>
  <div class="login-container">
    <div class="login-header">
      <h1>用户登录</h1>
      <p class="subtitle">欢迎回来！请输入您的账号和密码</p>
    </div>
    <div class="login-form">
      <InputArea />
      <div class="login-footer">
        <span>还没有账号？</span><a>点我注册</a>
      </div>
    </div>
  </div>
</template>

<script>
import InputArea from './InputArea.vue';
export default {
  name: 'MainContent',
  data(){
    return {

    }
  },
  components: { InputArea }
}
</script>

<style scoped>
.login-container {
  width: 400px;
  margin: 100px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: all 0.5s ease;
}

.login-container:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transform: translateY(-10px);
  transition: all 0.5s ease;
}

.login-header {
  background: linear-gradient(135deg, #00e5ff, #0052CC);
  padding: 40px 20px;
  text-align: center;
}

h1 {
  color: white;
  font-size: 28px;
  margin-bottom: 10px;
}

.subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 16px;
}

.login-form {
  padding: 40px 30px;
  background-color: rgb(238, 238, 238);
}

.login-footer{
  margin-top: 10px;
  float: right;
}

a:hover{
  cursor: pointer;
}
</style>